<template>
	<view class="give_integral">
		<uv-navbar placeholder autoBack bgColor="#CA1C1D">
			<template v-slot:left>
				<view class="left_slot">
					<image src="@/static/images/back.png"></image>
				</view>
			</template>
			<template v-slot:center>
				<view class="nav_title">积分转赠</view>
			</template>
		</uv-navbar>
		<view class="content">
			<view class="item">
				<view class="head">积分</view>
				<input type="text" placeholder="请输入数量" v-model="form.number" class="input_view">
			</view>
			<view class="balance">可转积分：{{integral}}</view>
			<view class="item">
				<view class="head">对方ID号</view>
				<input type="text" placeholder="请输入ID号" v-model="form.to_id" class="input_view">
			</view>
			<view class="submit">
				<view @click="submit">确认</view>
			</view>
			<view class="parse_view">
				<view class="head">温馨提示:</view>
				<view>1.请确认您要转账的ID是否正确，避免转错。</view>
				<view>2.请确保您的积分余额充足，以免转出失败。</view>
				<view>3.转出操作完成后，请及时核对记录，确保接收用户正确，数额正确。</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		userInfo,
		userTurn
	} from "@/request/api";
	import {
		ref,
		reactive
	} from "vue";
	const integral = ref("");
	const getUserInfo = async () => {
		let {
			user
		} = await userInfo();
		integral.value = user.integral;
	};
	getUserInfo();
	const form = reactive({
		field: "integral",
		to_id: "",
		number: ""
	});
	const submit = async () => {
		await userTurn(form);
		uni.$uv.toast("操作成功");
	};
</script>

<style scoped lang="scss">
	.give_integral {
		min-height: calc(100vh - var(--window-top) - var(--window-bottom));
		padding: 0rpx 20rpx;
		box-sizing: border-box;
		overflow: hidden;

		.left_slot {
			image {
				width: 43rpx;
				height: 36rpx;
			}
		}

		.nav_title {
			color: #F5F5F5;
			font-size: 36rpx;
		}

		.content {
			padding: 10rpx 0;
			box-sizing: border-box;

			.item {
				.head {
					height: 76rpx;
					line-height: 76rpx;
					color: #333333;
					font-size: 28rpx;
				}

				.input_view {

					height: 110rpx;
					border-radius: 20rpx;
					border: 1px solid #CCCCCC;
					padding: 0 38rpx 0 32rpx;
					box-sizing: border-box;
					background: #EEEEEE;
					display: flex;
					justify-content: space-between;
					align-items: center;

					input {
						flex: 1;

						&.input {
							color: #999999;
							font-size: 28rpx;
						}
					}

					.unit {
						color: #333333;
						font-size: 36rpx;
						font-weight: bold;
					}

					.all {
						color: #333333;
						font-size: 36rpx;
						font-weight: bold;
						padding-left: 64rpx;
						box-sizing: border-box;
					}

					.look {
						color: #999999;
						font-size: 28rpx;
					}
				}
			}

			.balance {
				color: #999999;
				font-size: 28rpx;
				margin-top: 20rpx;
				padding-left: 10rpx;
				box-sizing: border-box;
			}

			.submit {
				margin-top: 55rpx;
				margin-bottom: 42rpx;
				padding: 0 10rpx;
				box-sizing: border-box;

				view {
					height: 88rpx;
					line-height: 88rpx;
					text-align: center;
					color: #FFFFFF;
					font-size: 28rpx;
					font-weight: bold;
					border-radius: 20rpx;
					background: #CA1C1D;
				}
			}

			.parse_view {
				padding: 0 10rpx;
				box-sizing: border-box;

				.head {
					color: #999999;
					font-size: 26rpx;
					font-weight: bold;
					margin-bottom: 18rpx;
				}

				view {
					line-height: 38rpx;
					color: #666666;
					font-size: 26rpx;
				}
			}
		}
	}
</style>